/* 1.获取请求,得到返回的数据,渲染在页面中 */

//地方在分散,index设置的全局根目录没有效果
//这里点击一下标签,就触发一次数据提交
function myData() {
    axios.get("http://api-breakingnews-web.itheima.net/my/userinfo",{headers:{"Authorization":localStorage.getItem("token")}}).then(({data:res})=>{
    let {id,username,nickname,email,user_pic}=res.data
    if(res.status===0) {
        $(`input[name="username"]`).val(username)
        $(`input[name="nickname"]`).val(nickname)
        $(`input[name="email"]`).val(email)
        $(`input[name="id"]`).val(id)
    }
})
}
myData()
/* 完成基本资料中的信息修改 
1.给form注册事件
2.将数据提交给服务器
3.如果成功了,将数据渲染到页面中
4.同时外面的数据需要渲染*/
$("form").on("submit",function (e) {
    e.preventDefault()   //牢记表单提交需要阻止默认行为,一般页面闪缩一下,就是没有阻止
    axios.post("http://api-breakingnews-web.itheima.net/my/userinfo",$("form").serialize(),
    {headers:{Authorization:localStorage.getItem("token")}}).then(({data:res})=>{
        // console.log(res);
        if(res.status===0) {
            //这里是修改信息成功了,要将数据从新渲染到页面中了
            myData()
            //当前的页面现在渲染完成了,但是需要在渲染父页面
            /* 不是同一个页面,子页面怎样操作父页面的数据===>类比下原生js有parent操作父元素
            JQ方法也有parent操作父元素,那么页面是否有parent呢,window页面也是有的,可以通个这个属性
            来控制父页面的数据渲染*/
            window.parent.youData()     //只要调用了父window上的方法,总是需要从新刷新一下
        }
    })
})

/* 完成重置按钮 ==>重置的功能好像没有完成===>点击重置后,需要修改第一个输入框的disable属性 
1.点击重置 ====>所谓的重置,就是让数据回到修改前的状态
*/
$(".my-reset").on("click",function () {
    myData()
})
//这里设置要求,昵称只可以是中文,而且至少一个汉字
let form = layui.form;

form.verify({ // 指定规则名和对应的验证规则
    nickname: [ // 昵称
        /^[\u4E00-\u9FA5]+$/,  // 大于等于1
        '昵称只能是中文'
    ],
})